<template>
  <div class="top-container">
      <div class="outer-container">
        <div class="search-zone">
            <search-input></search-input>
            <span>|</span>
            <router-link to='' class="write">写日记</router-link>
            <span>|</span>
            <router-link to='' class="diary">我的日记本</router-link>
        </div>
        <div class="img-container common-adv-box">
            <img src="../../../static/img/banner.png" alt="">
        </div>
        <div class="info-container">
            <diary :waterFall="getDiaryIndex" :diary_list="diary_list"></diary>
            <no-more v-if="page >= total_page"></no-more>            
        </div>
      </div>
  </div>
</template>
<script>
    import SearchInput from '@/view/Search/Input';
    import { mapState,mapMutations } from 'vuex';
    import Diary from '@/view/Diary/Diary';
    import NoMore from '@/components/Tools/NoMore';
    export default{
        data(){
            return {
                diary_list: [],
                page: 1,
                total_page: 1,
            }
        },
        components:{
            SearchInput,
            Diary,
            NoMore,
        },
        created(){
            this.getDiaryIndex(1);
        },
        computed:mapState(['category_list']),
        methods: {
            getDiaryIndex(){
                if( this.page > this.total_page)return;
                this.Server.getDiaryIndex({
                    page: this.page,
        			page_size: 1,
                }).then((res)=>{
                    this.diary_list = this.diary_list.concat(res.data.diary_list);
                    this.page++;
                    // this.diary_list = res.data.diary_list;
                    this.total_page = res.data.total_page;
                })
            },
        }
    }
</script>
<style lang="less" scoped>
    span{
        margin: 0 25px;
    }
    .write{
        display: inline-block;
        padding-left: 30px;
        line-height: 40px;
        background: url(../../../static/img/icon_diary.png) no-repeat left center;
        background-size: 22px 22px;
    }
    .diary{
        display: inline-block;
        padding-left: 30px;
        line-height: 40px;
        background: url(../../../static/img/icon_mydiary.png) no-repeat left center;
        background-size: 22px 22px;
    }
    .info-container{
        margin-top: 30px;

    }
</style>

